<template>
	<view>
		<!-- <view style="margin-left: 223rpx;margin-top: 20rpx;">
			<uploader />
		</view> -->
		<view class="install-container" style="margin-bottom: 30rpx;">
		
			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
			这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params['高层住宅小区']" ref="form" validateTrigger="bind" class="word5">
				<uni-forms-item required label="检查点名称：" name="小区名称">
					<input maxlength="50" placeholder="请输入小区名称" v-model="params['高层住宅小区']['小区名称']" @input="binddata('小区名称',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="检查点地址：" name="地址">
					<choose-address @location="getLocation" placeholder="请输入小区地址" v-model="params['高层住宅小区']['地址']" @input="binddata('地址',$event)"></choose-address>
				</uni-forms-item>
				<uni-forms-item required label="物业名称：" name="物业名称">
					<input maxlength="18" v-model="params['高层住宅小区']['物业名称']" placeholder="请输入物业名称" @input="binddata('物业名称',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="负责人：" name="负责人">
					<input maxlength="18" v-model="params['高层住宅小区']['负责人']" placeholder="请输入负责人姓名" @input="binddata('负责人',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required name="联系电话" label="联系电话：">
					<input maxlength="18" v-model="params['高层住宅小区']['联系电话']" placeholder="请输入负责人联系电话" @input="binddata('联系电话',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required name="竣工时间" label="小区竣工时间：">
					<date-picker placeHolder="请填写小区竣工时间" v-model="params['高层住宅小区']['竣工时间']" @input="binddata('竣工时间',$event)"></date-picker>
				</uni-forms-item>
				<uni-forms-item required name="消防重点关注对象" label="消防重点对象：">
					<uni-data-checkbox v-model="params['高层住宅小区']['消防重点关注对象']" :localdata="status"></uni-data-checkbox>
				</uni-forms-item>
				<button class="grid-btn" @click="submitForm">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import uploader from '../myComponents/image-uploader.vue'
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from './lb-picker/index.vue'
	import FacilityInfo from './facilityInfo.vue'
	import ResidentInfo from './residentInfo.vue'
	import ChooseAddress from '../myComponents/chooseAddress.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			uploader,
			DatePicker,
			LbPicker,
			ResidentInfo,
			ChooseAddress
		},
		data() {
			return {
				label: '请选择证件类型',
				installTypeList: this.$type.installTypeList,
				params: {
					所属网格id: null,
					lagitude: null,
					longitude: null,
					检查点类型: 'residential',
					高层住宅小区: {
						小区id: null,
						小区名称: null,
						物业名称: null,
						联系电话: null,
						地址	: '',
						负责人: null,
						竣工时间: null,
						消防重点关注对象: null,
						备注	: null,
						照片上传: null
					}
				},
				status: [{
						text: '是',
						value: true
					},
					{
						text: '否',
						value: false
					}
				],
				//表单验证规则
				rules: {
					小区名称: {
						rules: [{
							required: true,
							errorMessage: '请输入小区名称',
						}]
					},
					物业名称: {
						rules: [{
							required: true,
							errorMessage: '请输入物业名称',
						}]
					},
					负责人: {
						rules: [{
							required: true,
							errorMessage: '请输入负责人姓名',
						}, ]
					},
					联系电话: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						}, ]
					},
					地址: {
						rules: [{
							required: true,
							errorMessage: '请输入检查点地址'
						}]
					},
					竣工时间: {
						rules: [{
							required: true,
							errorMessage: '请输入竣工时间'
						}]
					},
					证件类型: {
						rules: [{
							required: true,
							errorMessage: '请选择证件类型'
						}]
					},
					证件编码: {
						rules: [{
							required: true,
							errorMessage: '请输入证件编码'
						}]
					},
					消防重点关注对象: {
						rules: [{
							required: true,
							errorMessage: '请选择是否是消防重点对象',
						}]
						// rules: [{
						// 	required: true,
						// 	errorMessage: '请输入检查地点',
						// }, {
						// 	//字符串格式，反斜杠要转义\\  开头结尾/ /省略  new RegExp("\\w+") 相当于  /\w+/
						// 	pattern: '^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
						// 	errorMessage: '身份证号码格式不正确',
						// }]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		created() {
			this.params.所属网格id = uni.getStorageSync('gridInfo').所属网格id 
		},
		methods: {
			getLocation(event) {
				console.log(event.address)
				this.params.lagitude = event.latitude
				this.params.longitude = event.longitude
				this.params.高层住宅小区.地址 = event.address
				console.log(this.params)
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					console.log(this.value1, '值')
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			submitForm(form) {
				/// console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					console.log(this.params)
					console.log('表单数据信息：', res);
					this.params.高层住宅小区.竣工时间 = dayjs(this.params.高层住宅小区.竣工时间).format('YYYY-MM-DDTHH:mm:ssZ')
					this.$emit('submit', this.params)
					// this.$emit('submit', Object.assign({},this.params,{高层住宅小区: res}))
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.install-container {
		padding-bottom: 90rpx;
	}
</style>